<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<div id="life"></div>
<script>
//------自定义组件-----
var MyComponent=React.createClass({
//当value改变时的onChange方法
onChange:function(e){
this.setState({
state1:e.target.value,
});
ReactDOM.render(
//通过从新渲染的方式改变属性
React.DOM.div({id:"hezi",},React.createElement(MyComponent,{pro1:"我是属性666"})), 
//React.DOM.div(null,"hello"), //通过从新渲染的方式移除组件，componentWillUnmount();
document.getElementById("life")
);
},
//依次测试组件的10个生命周期方法
getDefaultProps:function(){  //设置默认的属性值
console.log("MyComponent--getDefaultProps",arguments);
return {
pro1:"我是1",
pro2:"我是2",
pro3:"我是3"
};
},
getInitialState:function(){ //初始化状态值
console.log("MyComponent--getInitialState",arguments);
return{
state1:"我是状态1",
state2:"我是状态2"
};
},
componentWillMount:function(){ //组件将要渲染
console.log("MyComponent--componentWillMount",arguments);
},
//------------------
render:function(){  //组件正式渲染
console.log("MyComponent--render",arguments);
return React.DOM.input({
value:this.props.pro1+this.state.state1,
onChange:this.onChange,
style:{ //style写成对象的形式
width:"400px",
color:"red",
}
});
},
//-----------------
componentDidMount:function(){ //组件渲染完成
console.log("MyComponent--componentDidMount",arguments);
},
//----------------
componentWillReceiveProps:function(){ //在运行状态中更改了属性触发的方法
console.log("MyComponent--componentWillReceiveProps",arguments);
console.log(this.props.pro1);//验证在拿取旧的props值
},
//----------------
shouldComponentUpdate:function(){ //给你一次打断更新的机会的方法
console.log("MyComponent--shouldComponentUpdate",arguments);
return true;
},
//-----------------
componentWillUpdate:function(){  //组件将要更新，如果上一个方法没有阻断的话，就会执行到这个方法里来
console.log("MyComponent--componentWillUpdate",arguments);
},
//-----------------
componentDidUpdate:function(oldProps,oldState){  //组件更新渲染完成，在第一次渲染时不执行
console.log("MyComponent--componentDidUpdate",arguments);
if(this.state.state1!="我是状态1")
this.replaceState(oldState); //替换组件
},
//-----------------
componentWillUnmount:function(){ //组件将从DOM中卸载
console.log("MyComponent--componentWillUnmount",arguments);
},
//-----------------
});
//------开始渲染组件-----
ReactDOM.render(
React.DOM.div({id:"hezi",},React.createElement(MyComponent,{pro1:"我是属性1"})),
document.getElementById("life")
);
</script>
</body>
</html>